import React from 'react';
import ReactDOM from 'react-dom';
import { Table, Form, Input, Button ,Select, Row, Col, DatePicker, Icon  } from 'antd';

const FormItem = Form.Item;
const Option = Select.Option;
const RangePicker = DatePicker.RangePicker;
import HouseDecActions from './actions/houseDecActions';

let uuid = 0;
const Demo = React.createClass({
  getInitialState() {
    return {
      roomTypeList: [], //房屋类型数据列表，从父组件传过来
      roomTypeListSelect: [],
      params:[], //handlechange中获取的数据
      keysArry:[], // 新增行的行号
    }
  },
  componentwillreceiveprops(nextProps){
    this.setState({
      roomTypeList: nextProps.roomTypeList
    });
  },
  componentDidMount(){
    let obj = {
      key: 0,
      count:'',
      facilityName:'',
      facilityNid:'',
      type:2
    }
    let roomTypeList = [];
    roomTypeList.push(obj)
    this.setState({
      roomTypeList:roomTypeList
    });
    this.getRoomType();
    //let keys = this.state.keysArry;
    //this.props.roomTypeList.map((item) => {
    //  keys = keys.concat(item.key);
    //});
    //this.setState({
    //  keysArry:keys
    //});

  },
  // 获取数据字典中房屋类型，并显示在select中
  getRoomType(){
    Utils.sendAjax({
      url:'/dict/list',
      data:JSON.stringify({"type":"roomType"}),
      callback:(result) => {
        if (result.code === '200') {
          let data = result.data;
          let obj = {
            facilityName:'',
            facilityNid:'',
            type:2
          }
          let arry = [];
          data.map((item) =>{
            obj = {
              facilityName:item.name,
              facilityNid:item.id,
              type:2
            }
            arry.push(obj);
          });
          this.setState({
            roomTypeListSelect:arry
          });

        } else {
          notification.error({message: result.message});
        }
      }
    });
  },
  // 获取输入框的值
  handleChange(e, value){
    let params = this.state.roomTypeList;

    let name,id,val;

    if(e.target){// input
      name = e.target.name;
      id = e.target.id;
      val = e.target.value;
    }else{//  select
      id = e.id;
      name= e.name;
      val = value;
    }
    let paramsId = parseInt(id.replace(/[^0-9]+/g, ''));
    let flag = false; // 不存在该条数据
    // 寻找已有数据params，查询是否存在key等于paramsId的记录
    params.map((item) =>{
      if(item.key ==  paramsId){
        flag = true;
        item[name] = val
      }
    });

    if(flag == false){// 不存在该条数据，则在数组params中追加一条数据
      let obj ={
        key:'',
        count:'',
        facilityName:'',
        facilityNid:'',
        type:2
      };
      obj[name] = val;
      obj.key = paramsId;
      params.push(obj);
    }else{ // 存在该条数据，则替换已有内容

    }
    this.setState({
      params:params,
      roomTypeList:params
    })
    HouseDecActions.getRoomTypeList({roomTypeList:this.state.params});

    this.props.addRoomTypeList(params);
  },

  // 添加一行房源
  addResource() {
    let keys = this.state.keysArry;
    keys = keys.concat(uuid);
    this.setState({
      keysArry: keys
    });

    let roomTypeList = this.state.roomTypeList;
    let  obj ={
      key: uuid++,
      count:'',
      facilityName:'',
      facilityNid:'',
      type:2
    };
    roomTypeList.push(obj);
    this.setState({
      roomTypeList:roomTypeList
    });
  },
  // 删除一行房源
  removeResource(k){
    let keys = this.state.keysArry;
    let roomTypeList = this.state.roomTypeList;
    keys = keys.filter((key) => {
      return key !== k;
    });
    
    roomTypeList = roomTypeList.filter((item) => {
      return item.key !== k;
    });


    this.setState({
      keysArry: keys,
      roomTypeList:roomTypeList
    });

    this.props.addRoomTypeList(roomTypeList);
  },


  render () {
    let  obj = {};
    let optionObj;
    const options = this.state.roomTypeListSelect.map((item) => {
      obj[item.facilityNid] = item.facilityName;
      optionObj = Object.assign({},obj);
      return <Option key={`key${item.facilityNid}`} value={item.facilityNid}>{item.facilityName}</Option>
    });
    uuid = this.state.roomTypeList.length;



    const firstRender = this.state.roomTypeList.length > 0 ? this.state.roomTypeList.map((item) => {
      let count = `count${item.key}`;
      let facilityNid = `facilityNid${item.key}`;
      return (
        <div key={`key-${item.key}`} className="record-div">
          <Input type="text" id={count} name="count" value={item.count} onChange={this.handleChange} style={{width:50}}/>
          &nbsp;&nbsp;间&nbsp;&nbsp;
          <Select placeholder="请选择" id={facilityNid} name="facilityNid" style={{width:100}}
                  onChange={this.handleChange.bind(this, {id: facilityNid, name:'facilityNid', type:'2'})} >
            {options}
          </Select>
          <a className="delete-btn" onClick={this.removeResource.bind(this, item.key)}><Icon type="delete" /></a>
        </div>
      );

    })
      : '';
    return (
      <div>
        {firstRender}
        <Button  type="ghost" onClick={this.addResource}><Icon type="plus"/>新增</Button>
      </div>
    );

  }
});

export default Demo